<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/includefile.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Theme style -->
<link href="${basePath}/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet"/>
<script src="${basePath}/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>
<style>
body{
font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑",tahoma,arial,simhei,"黑体";
}
</style>
<script>
var copyRow;
$(document).ready(function(){
	$(".timepicker").timepicker({
        showInputs: false
      });
	copyRow=$('#costDescTable > tbody tr:eq(0)').html();
	reloadFun();
});
function rowAdd(obj){
	$(obj).parent().parent().parent().parent().prev().append('<tr>'+copyRow+'</tr>');
	reloadFun();
}

function reloadFun(){
	$(".timepicker").timepicker({
        showInputs: false
      });
	$(".costPrice").change(function() {
		var count=0;
		$('.costPrice').each(function(index,ele){
			count=count+parseFloat($(this).val());
		});
		$('#countPrice').text(count+'元');
	}); 
}

function rowRemove(obj){
	$(obj).parent().parent().parent().remove();
	var count=0;
	$('.costPrice').each(function(index,ele){
		count=count+parseInt($(this).val());
	});
	$('#countPrice').text(count+'元');
}

function saveForm(){
	var rowInfo=$('#costDescTable > tbody').children("tr");
	var saveData="";
	for(i=0;i<rowInfo.length;i++){
		var row;
		var colInfo =rowInfo.eq(i).children();
		var col1=colInfo.eq(1).find('input').val();
		var col2=colInfo.eq(2).find('select').val();
		var col3=colInfo.eq(3).find('input').val();
		var col4=colInfo.eq(4).find('input').val();
		var col5=colInfo.eq(5).find('input').val();
		row=col1+","+col2+","+col3+","+col4+","+col5;
		saveData=saveData+";"+row;
	}
	saveData=saveData.substring(1);
	$('#costInfoStr').val(saveData);
	$('#costForm').submit();
}
</script>
<title>单文件上传</title>
</head>
<body class="skin-blue">

<div class="wrapper">

 <header class="main-header">
 <s:action name="main!navbar" executeResult="true"></s:action>
 </header>
 <aside class="main-sidebar">
   <s:action name="main!menu" executeResult="true"></s:action>
 </aside>


<div class="content-wrapper">
<!-- 页面标题 start -->
 <section class="content-header">
   <h1>开销管理<small>今日开销</small></h1>
   <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
      <li><a href="#">开销管理</a></li>
      <li class="active">今日开销</li>
   </ol>
 </section>
 <!-- 页面标题 end -->
 <!-- 页面内容 start -->
 <section class="content">
   <div class="row">
     <div class="col-sm-3">
       <div class="info-box">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text" style="color:red;">本年消费</span>
           <span class="info-box-number">${costCountInfos.yearCost}元</span>
         </div>
       </div>     
     </div>
     <div class="col-sm-3">
       <div class="info-box">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text" style="color:green;">本月消费</span>
           <span class="info-box-number">${costCountInfos.monthCost}元</span>
         </div>
       </div>
     </div>
     <div class="col-sm-3">
       <div class="info-box">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text" style="color:blue;">本周消费</span>
           <span class="info-box-number">${costCountInfos.weekCost}元</span>
         </div>
       </div>
     </div>
     <div class="col-sm-3">
       <div class="info-box" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
         <span class="info-box-icon bg-aqua" style="padding-top:15px;"><i class="fa fa-calendar"></i></span>
         <div class="info-box-content">
           <span class="info-box-text">今日消费</span>
           <span class="info-box-number">${costCountInfos.dayCost}元</span>
         </div>
       </div>
     </div>
     <table class="table text-center table-hover table-condensed">
     <thead>
     <tr class="success">
        <td>时间</td>
        <td>类型</td>
        <td>名称</td>
        <td>明细</td>
        <td>价格</td>
     </tr>
     </thead>
     <tbody>
     <s:iterator value="costLiveList" var="key">
     <tr>
        <td>${key.costTime}</td>
        <td>${key.typeName}</td>
        <td>${key.name}</td>
        <td>${key.remark}</td>
        <td style="color:red;">${key.price}元</td>
     </tr>
     </s:iterator>
     </tbody>
     </table>
   </div>
   <div class='row'>
     <div class='col-md-12'>
       <div class="box box-primary">
         <div class="box-header">
            <i class="fa fa-edit"></i>
            <h3 class="box-title">今日开销添加</h3>
         </div>
         <div class="box-body pad table-responsive">
           <form class="form-horizontal" role="form" action="myLife!saveCostInfoToday.html" method="post" id="costForm">
             <input type="hidden" name="costInfoStr" id="costInfoStr"></input>
             <table class="table table-bordered text-center" id="costDescTable">
                <thead>
                 <tr>
                  <td>操作</td>
                  <td>时间</td>
                  <td>类型</td>
                  <td>名称</td>
                  <td>明细</td>
                  <td>价格</td>
                 </tr>
                </thead>
                <tbody>
                <tr>
                  <td class="col-sm-1">
                    <div>
                      <a href="#" onclick="rowRemove(this);" style="color:red;"><i class="fa fa-fw fa-minus-square" style="color:red;"></i>删除</a>
                    </div>
                  </td>
                  <td class="col-sm-2">
                    <div class="bootstrap-timepicker">
                      <div class="input-group">
                        <input type="text" class="form-control timepicker"/>
                        <div class="input-group-addon">
                          <i class="fa fa-clock-o"></i>
                        </div>
                    </div><!-- /.form group -->
                    </div>
                  </td>
                  <td class="col-sm-2">
                    <select class="chosen-select chosen-transparent form-control">
                     <s:iterator value="wordBookList" var="key">
                      <option value="${key.dicEn}">${key.dicCn}</option>
                     </s:iterator>
                    </select>
                  </td>
                  <td class="col-sm-2">
                    <div>
                      <input type="text" class="form-control"/>
                    </div>
                  </td>
                  <td class="col-sm-3">
                    <div>
                      <input type="text" class="form-control"/>
                    </div>
                  </td>
                  <td class="col-sm-2">
                    <div>
                      <input type="text" class="form-control costPrice"/>
                    </div>
                  </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                  <td class="col-sm-1">
                    <div>
                      <a href="#" onclick="rowAdd(this);"><i class="fa fa-fw fa-plus-square"></i>新增</a>
                    </div>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td><strong>总计：</strong></td>
                  <td><strong style="color:green;" id="countPrice">0元</strong></td>
                </tr>
                </tfoot>
             </table>
             <div class="col-sm-offset-3">
               <div class="col-sm-offset-3 col-sm-2"><button type="button" class="btn btn-block btn-info btn-flat" onclick="saveForm();">保存</button></div>
               <div class="col-sm-2"><button type="reset" class="btn btn-block btn-success btn-flat">重置</button></div>
             </div>
           </form>
         </div>
       </div>
     </div>
   </div>
 </section>
 <!-- 页面内容 end -->
 </div>
 </div>
</body>
</html>
		